/* 选择HTML中的根元素 (HTML 中的 <html>) */
:root {
    /* 定义一些颜色 后面通过var使用 */
    --primary-color: #4460f1;
    --white-color: #ffffff;
    --light-text-color: #9398b3;
    --light-bg-color: #f2f4ff;
    --dark-color: #333333;
    --background-color: #fcfcff;
    --red-color: #f64f59;
    --purple-color: #c471ed;
}

/* 设置HTML中body的样式 (HTML 中的<body> */
body {
    /* font-family: '楷体', sans-serif; */
    /* 字体 */
    font-family: 'Noto Sans SC', sans-serif;
    /* 字号 */
    font-size: 16px;
    /* 字重 (字体粗细) */
    font-weight: 400;
}

.main {
    /* 设置整体为弹性盒子 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 如果一行排列不下换行 */
    flex-wrap: wrap;
    /* 宽度最大占60%的宽 */
    max-width: 60dvw;
    /* 高度动态100% */
    height: 100dvh;
    /* 上下10px 左右居中 */
    margin: 10px auto;
}

.logo {
    /* 
       这是一个简写 由3个值组成 分别是:
       flex-grow属性定义项目的放大比例, 默认为0, 即如果存在剩余空间, 也不放大
       flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小.
       flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间. 浏览器根据这个属性, 计算主轴是否有多余空间. 它的默认值为auto, 即项目的本来大小.
    */
    /* 1倍放大 不缩小 占据50% */
    flex: 1 0 50%;
}

/* logo选择器下的h1标签 */
.logo h1 {
    /* 字体大小64px */
    font-size: 64px;
    /* 弹性盒子布局 */
    display: flex;
    /* 水平方向布局 */
    flex-direction: column;
}

/* 
    logo 背后的渐变色图 
    创建一个伪元素, before伪元素会在logo的前面创建一些内容
*/
.logo::before {
    /*  内容为空 */
    content: '';
    /* 宽度高度大小占logo部分的20% */
    width: 20%;
    height: 20%;
    /* 设置为绝对定位 
       注意因为 logo 外面存在一个类选择器 main
       此时则不会再从浏览器左上角开始定位
       而是在 main 中绝对定位
    */
    /* 向下移动 2% */
    margin-top: 2%;
    position: absolute;
    /* 颜色为梯度变化 
       var(--dark-color)是一个固定写法, 这样可以使用:root中已经定义好的颜色
     */
    background: linear-gradient(to right, var(--primary-color), var(--purple-color), var(--red-color));
    /* 高斯模糊70像素 */
    filter: blur(70px) opacity(50%);
    /* 设置z轴 将其放置在文字下 */
    z-index: -1;
}

/* 设置logo下的p元素 */
.logo p {
    /* 字重700 */
    font-weight: 700;
    color: var(--dark-color);
}

/* 设置logo下的a元素 */
.logo a {
    /* 去掉超链接的下划线 */
    text-decoration: none;
    color: var(--primary-color);
}

/* 设置logo下的a元素鼠标悬停效果 */
.logo a:hover {
    /* 悬停时加上下划线 */
    text-decoration: underline;
    color: var(--dark-color);
}

/* 设置login部分的样式 */
.login {
    /* 1倍放大 不缩小 根据logo变化自动变化 */
    flex: 1 0 auto
}

/* 设置login中的表单form为弹性盒子 */
.login form {
    display: flex;
    flex-direction: column;
    /* 间距20px */
    gap: 20px;
}

/* 设置login中的 input */
.login input {
    background-color: var(--light-bg-color);
    font-size: 14px;
    /* 输入框宽度为100% */
    width: 100%;
    /* 无边框 */
    border: 0;
    /* input 内的文字向右移动的距离 */
    padding-left: 20px;
    /* 行高 */
    line-height: 60px;
    /* 圆角矩形 */
    border-radius: 10px;
    /* 技巧: 因为上面添加了padding-left会导致输入框被挤出界面
       使用box-sizing可以修复input加入padding之后大小变化的问题
    */
    box-sizing: border-box;
}
.login input:focus {
    outline: none;
    border: 2px solid;
    border-color: var(--primary-color);
}

/* login选择器中的input元素中的sumbit选择器*/
.login input.submit {
    color: var(--light-bg-color);
    font-weight: 700;
    /* 登陆两个字不需要向右移动, 覆盖掉上面设置的padding-left */
    padding-left: 0px;
    background-color: var(--primary-color);
    /* 更改指针形状 */
    cursor: pointer;
    /* 
      box-shadow 设置按钮阴影 
      X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色
    */
    box-shadow: 0px 10px 20px 1px var(--primary-color);
    /* transition 可以在不同状态之间切换的时候定义不同的过渡效果 */
    transition: box-shadow 0.5s;
}

/* login选择器中的input元素中的sumbit选择器的悬停状态*/
.login input.submit:hover {
    /* padding-left: 0px; */
    background-color: var(--primary-color);
    /* 更改悬停时的阴影效果 在视觉上有按下去的感觉 */
    box-shadow: 0px 5px 10px 1px var(--primary-color);
}

/* login 中的所有超链接
   包括找回密码文字的颜色和图标的颜色
*/
.login a {
    text-decoration: none;
    color: grey;
    float: right;
}

/* login 中的所有超链接悬停效果 */
.login form a:hover {
    text-decoration: underline;
    color: var(--primary-color);
}


/* 在文字背后添加一根线
   此处设置比较难, 感兴趣可以作为一个技巧学习
   思路是添加一个高度为1的block 然后移动到文字下面
*/
.separator {
    /* 上 、右= 左 、下 */
    margin: 50px 0 30px;
}

/* 由于 使用其他方式登录 下面有一根线
   这根线需要使用绝对定位脱离文档流
   所以需要单独给options选择器控制的部分设置一个相对布局
   好让options内的子元素不会脱离options
 */
.options {
    position: relative;
}

.separator::before {
    content: '';
    /* 绝对定位的元素的位置相对于最近的已定位祖先元素，
       如果元素没有已定位的祖先元素，
       那么它的位置相对于最初的包含块。 
    */
    position: absolute;
    top: 10px;
    width: 100%;
    height: 1px;
    background-color: var(--dark-color);
    opacity: .3;
    z-index: 1;
}

.separator p {
    font-size: 14px;
    /* 将容器元素的宽度设置为fit-content，
    相当于公式 min(max-content, max(auto, argument))，
    类似于auto 的计算(即 minmax(auto, max-content)) */
    width: fit-content;
    margin: 0 auto;
    padding: 0 10px;
    color: var(--light-text-color);
    background-color: var(--background-color);
    position: relative;
    z-index: 2;
}

/* 设置options中的无序列表 */
.options ul {
    /* 去掉列表中的项目符号 */
    list-style: none;
    display: flex;
    justify-content: center;
    /* 列表之间间隔20px */
    gap: 20px;
    /* 默认有一个padding 40px 手动清除 */
    padding-inline-start: 0px;
}

/* 设置options中的ul中的li超链接a (实际上是图标) */
.options ul li a {
    /* 去掉下划线 */
    text-decoration: none;
    /* 每一个图标都用一个60*60的小盒子包裹起来 */
    width: 60px;
    height: 60px;
    /* 将盒子设置为弹性盒子并水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 盒子设置为圆角矩形 */
    border-radius: 10px;
    background-color: var(--white-color);
    box-shadow: var(--light-text-color) 0 10px 20px -10px;
    /* 所有动画设置成0.5s减速过渡效果 */
    transition: all 0.5s ease-out;
}

/* 设置options中的ul中的li超链接a的悬停效果 (实际上是图标) */
.options ul li a:hover {
    color: var(--white-color);
    box-shadow: none;
}

/* 设置options中的ul中的li的第1个超链接a的悬停效果的背景颜色 */
.options ul li:nth-child(1) a:hover {
    background-color: #da7fc5;
}

/* 设置options中的ul中的li的第2个超链接a的悬停效果的背景颜色 */
.options ul li:nth-child(2) a:hover {
    background-color: #00439c;
}

/* 设置options中的ul中的li的第3个超链接a的悬停效果的背景颜色 */
.options ul li:nth-child(3) a:hover {
    background-color: #107c10;
}
/* 验证码 */
.verifi-code #input-code{
    width: 65%;

}
/* 验证码 */
.verifi-code #input-code {
    width: 65%;
}

.verifi-code #code {
    width: 30%;
    float: right;
    font-size: large;
    color: green;
    border: 0;
    font-weight: bolder;
    letter-spacing: 3px;
    padding-left: 6px;
}

/* 密码输入不符合要求时变为红色 */  
.password-input-zs.invalid {  
    border-color: red;  
  }  
    
  /* 密码输入符合要求时变为绿色 */  
  .password-input-zs.valid {  
    border-color: green;  
  }